<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Insert title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/platform2.css">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
</head>
<body>
选择范围：
<select style="width:200px;">
    <option>安塞片区</option>
    <option>延长片区</option>
    <option>靖边县的多口井</option>
</select>
<button class="easyui-linkbutton" onclick="submit()">确定</button>
<div id="container" style="width: 30%; height: 200px; margin-bottom: 20px"></div>
<div class="container">
    <div id="pf-bd">
        <div id="pf-page">
            <div id="tb" style="padding:0 30px;">
                <!--                开始时间：<input id="dt1" type="text" name="birthday" style="width:166px;height:35px;line-height:35px;">-->
                <!--                结束时间：<input id="dt2" type="text" name="birthday" style="width:166px;height:35px;line-height:35px;">-->
                <!--                关键词: <input type="text" id="payerCode" name="payerCode"-->
                <!--                               style="width:166px;height:35px;line-height:35px;"/>-->
                <!--                <a href="javascript:search()" id="" class="easyui-linkbutton"-->
                <!--                   data-options="iconCls:'icon-search'">查询</a>-->
                <a href="json/data_list.json" download class="easyui-linkbutton"
                   data-options="iconCls:'icon-save'">下载</a>
                <a href="javascript:batchRemove()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove'">删除</a>
                <a href="javascript:batchRemove()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove'">移动</a>
                <a href="javascript:$('#dlg').dialog('open');" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add'">加标签</a>
            </div>
            <table id="dg"></table>
        </div>
    </div>
</div>

<script src="https://webapi.amap.com/loader.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=84e3d9795d4be512a87855de2a0dc85e&plugin=AMap.PolygonEditor,AMap.CitySearch"></script>

<script type="text/javascript">
    $(function () {
        $("#dg").datagrid({
            title: "资料列表",
            method: "get",
            url: 'json/data_list.json',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageList: [2, 5, 10, 20, 30],
            rownumbers: true,
            pagePosition: "bottom",
            columns: [[
                {field: "ck", checkbox: "true"},
                {field: "order", title: '序号', width: 100},
                {field: "filename", title: '文件名', width: 100},
                {field: "updateTime", title: '上传时间', width: 150},
                {field: "updateUser", title: '上传用户', width: 100},
                {field: "filePath", title: '所在文件夹', width: 200},
                {field: "fileSize", title: '文件大小', width: 100},
                {field: "tags", title: '标签列表', width: 100},
                {
                    field: "option", title: '操作', width: 150,
                    formatter: function (value, rowData, index) {
                        return "<a href='javascript:void(0)' onclick='remove(" + rowData.id + ")'>删除   </a>"
                            + "<a href='javascript:void(0)' onclick='toRename(" + rowData.id + ")' >重命名  </a>"
                            + "<a href='javascript:void(0)' onclick='preview(" + rowData.id + ")' >预览  </a>"

                    }
                }
            ]],
            loadFilter: function (data) {
                var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                var options = pager.pagination('options'); // 获取分页器的选项
                // 注意：以下代码是客户端分页的示例，但通常不推荐这样做，因为性能问题
                var start = (options.pageNumber) * options.pageSize;
                var rows = data.slice(start, start + options.pageSize);
                console.log({total: data.length, rows: rows})
                return {total: data.length, rows: rows};

            }
        });
    })


    var points = [];
    var map = new AMap.Map("container", {
        center: [116.471354, 39.994257],
        zoom: 18
    });

    map.setFitView();
    var polyEditor = new AMap.PolygonEditor(map);
    polyEditor.on('add', function (data) {
        var polygon = data.target;
        var path = polygon.getPath();
        for (var i = 0; i < path.length; i++) {
            points.push({"lat": path[i].lat, "lng": path[i].lng});
        }
        polyEditor.addAdsorbPolygons(polygon);
        polygon.on('dblclick', () => {
            polyEditor.setTarget(polygon);
            polyEditor.open();
            points = [];
        })
    })
    showCityInfo();


    function createPolygon() {
        polyEditor.close();
        polyEditor.setTarget();
        polyEditor.open();
    }

    polyEditor.setTarget();
    polyEditor.open();

    function submit() {
        localStorage.points = JSON.stringify(points);
        $.messager.confirm("提示", "是否保存框选范围？", function (r) {
            if (r) {
                $.messager.prompt("提示", "请命名", function (e) {
                    if (e) {
                        $.messager.show({
                            title: "提示", msg: "范围保存成功", showType: "show", timeout:1000, style: {
                                left: '',
                                right: 0,
                                top: document.body.scrollTop + document.documentElement.scrollTop,
                                bottom: ''
                            }
                        })
                    }
                })

            }
        })
    }

    //获取用户所在城市信息
    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    //地图显示当前城市
                    map.setBounds(citybounds);
                }
            } else {
                console.log(result.info)
            }
        });
    }


</script>
</body>
</html>